import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-chart-load-curve-fadianji',
  templateUrl: './chart-load-curve-fadianji.component.html',
  styleUrls: ['./chart-load-curve-fadianji.component.css']
})
export class ChartLoadCurveFadianjiComponent implements OnInit, OnChanges {
	@Input() data:Array<any>;
  ngOnChanges(changes: SimpleChanges): void {
    if(this.data&&changes['data']){
      this.initChart()
    }
  }
  constructor() { }
  public chartOptions;
  ngOnInit() {
  	
  }
  initChart() {
    let data = this.data;
    this.chartOptions = {
      chart: {
        type: 'spline'
      },
      title: '',
      xAxis: {
        type: 'datetime',
        labels: {
          overflow: 'justify'
        },
        categories: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00']
      },
      credits: {
        enabled: false  
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null
      },
      plotOptions: {
        spline: {
          lineWidth: 4,
          states: {
            hover: {
              lineWidth: 5
            }
          },
          marker: {
            enabled: false
          }
        }
      },
      series: data,
      navigation: {
        menuItemStyle: {
          fontSize: '10px'
        }
      }
    }
  }
}
